<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css放在head标签 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <div id="app">
        <!-- el-container一个容器 -->
        <el-container class="container">
            <!-- header头部 -->
            <el-header class="flex jc-sb aic">
                <span class="fff f16">电影后台管理系统</span>
                <span class="fff f16">电影模块</span>
                <div>
                    <span class="fff f16">张三</span>
                    <span class="fff f16">退出登录</span>
                </div>
            </el-header>
            <el-container>
                <!-- aside侧边栏 -->
                <el-aside width="200px">
                    <!-- menu面板 -->
                    <el-menu :default-openeds="['1', '3']">
                        <el-menu-item index="1">
                            <a href="./user.html">
                                <i class="el-icon-menu"></i>
                                <span>用户模块</span>
                            </a>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span>电影模块</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-menu"></i>
                            <span>影院模块</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-menu"></i>
                            <span>视频模块</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <!-- main主体 -->
                <el-main>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix flex jc-sb aic">
                            <span class="f16">电影列表</span>
                            <el-button style="float: right; padding: 3px 0" type="text">新增电影</el-button>
                        </div>

                        <!-- 表格 -->
                        <el-table stripe border :data="tableData" style="width: 100%">
                            <el-table-column align="center" prop="name" label="电影名称"> </el-table-column>

                            <el-table-column align="center" prop="poster" label="海报">
                                <!-- 自定表格的内容 -->
                                <template slot-scope="scope">
                                     <img style="width: 65px;height: 100px;" :src="scope.row.poster" alt="">
                                </template>
                            </el-table-column>

                            <el-table-column align="center" prop="director" label="主演"> </el-table-column>
                            <el-table-column align="center" prop="nation" label="民族"> </el-table-column>
                            <el-table-column align="center" prop="grade" label="评分"> </el-table-column>
                        </el-table>
                    </el-card>

                </el-main>
            </el-container>
        </el-container>
    </div>


    <!-- js放在body底部 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.js"></script>
    <!-- elementUI库依赖vue.js, 所以要反正vue.js的后面 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                tableData: [{
                    "type": 1,
                    "id": 5687,
                    "name": "我和我的父辈",
                    "poster": "https://pic.maizuo.com/usr/movie/6d31257bd0c897f0a953b7097853d627.jpg",
                    "director": "吴京|章子怡|徐峥|沈腾",
                    "desc": "继2019年《我和我的祖国》、2020年《我和我的家乡》，国庆三部曲之《我和我的父辈》接棒定档2021年国庆。由吴京、章子怡、徐峥、沈腾导演，“中国电影追梦人”再次集结，以革命、建设、改革开放和新时代为历史坐标, 通过“家与国”的视角描写几代父辈的奋斗经历，讲述中国人的血脉相连和精神传承，再现中国人努力拼搏的时代记忆。",
                    "nation": "中国大陆",
                    "premiereAt": 1632960000000,
                    "runtime": 100,
                    "grade": "7",
                }]
            },

            created() {
                this.getList();
            },

            methods: {
                getList() {
                    var url = 'http://81.71.65.4:3008/film/all';
                    // 请求参数
                    var data = {

                    }
                    axios.get(url).then(res => {
                        console.log(res.data);
                        this.tableData = res.data.data;
                    })
                }
            }
        })
    </script>
</body>

</html>